<template>
  <div class="sta-spot">
      <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="100px">
          <el-form-item label="日期">
                <el-date-picker
                size="small"
                v-model="selectDate"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateChange"
                ></el-date-picker>
            </el-form-item>
      <el-form-item label="责任部门">
        <treeselect style="width: 199px;height: 32px" v-model="selectForm.deptId" :options="company"
                    placeholder="请选择所属部门"/>
      </el-form-item>
      
      <el-form-item label="责任人">
        <el-select size="small" v-model="selectForm.repairsUserId" placeholder="请选择" clearable>
          <el-option
            v-for="item in userlist"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="selectForm.pageNum=1;getList();">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" ref="singleTable" :data="list" stripe border >
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column align="center" label="任务编号" width="150"  prop="oddNumber">
        <template slot-scope="scope">
          <div class="bule"  @click="details(scope.row)">{{scope.row.oddNumber}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计划名称" width="150"  prop="devicesId"/>
      <el-table-column label="责任部门" align="center" prop="theRepairTime"/>
      <el-table-column align="center" label="责任人" prop="repairsUserName"/>
      <el-table-column align="center" label="日期" prop="faultType"/>
      <el-table-column align="center" label="任务状态" prop="faultState">
        <template slot-scope="scope">
          <div class="status camBlue" v-if="scope.row.faultState==1">一般</div>
          <div class="status yellow" v-if="scope.row.faultState==2">严重</div>
          <div class="status red" v-if="scope.row.faultState==3">紧急</div>
          <div class="status blue" v-if="scope.row.faultState==4">技术改造</div>
        </template>
      </el-table-column>
      <el-table-column label="实际开始时间" property="repairsDescribe" :show-overflow-tooltip="true"/>
      <el-table-column label="实际结束时间" property="repairsDescribe" :show-overflow-tooltip="true"/>
      <el-table-column label="应捡设备数" property="repairsDescribe" :show-overflow-tooltip="true"/>
      <el-table-column label="一件设备数" property="repairsDescribe" :show-overflow-tooltip="true"/>
      <el-table-column label="实际结束时间" property="repairsDescribe" :show-overflow-tooltip="true"/>
      <el-table-column align="center" label="状态" prop="repairsState">
        <template slot-scope="scope">
          <div class="status roseRed" v-if="scope.row.repairsState==1">待分派</div>
          <div class="status orange" v-if="scope.row.repairsState==2">已分派</div>
          <div class="status blue" v-if="scope.row.repairsState==3">维修中</div>
          <div class="status cyan" v-if="scope.row.repairsState==4">验收通过</div>
          <div class="status green" v-if="scope.row.repairsState==5">撤销</div>
          <div class="status gray" v-if="scope.row.repairsState==6">验收不通过</div>
          <div class="status purple" v-if="scope.row.repairsState==7">已解决</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="处理人" prop="responsibleUserName" />


      <el-table-column label="操作" align="center" width="200" fixed="right">
        <template slot-scope="scope">
          
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
export default {
    data(){
        return{
            selectForm: {
                pageNum: 1,
                pageSize: 10
            },
            company:'',
            loading: false,//加载
            list: [],//数据
            total: 0,
            selectDate: '',//时间
           
            userlist:[],
           
            
            
        }
    },
    created() {
      this.getTree()
      this.getUserList()
      this.getList()
    },
    methods: {
      //所属部门下拉
      getTree() {
        treeselect().then(response => {
          this.company = response.data;
        });
      },
      getUserList(){
        listUser().then((res)=>{
          if(res.code==200){
            this.userlist=res.rows
          }
        })
      },
     
      getList() {
        reportRepairList(this.selectForm).then((res)=>{
          this.list=res.rows
          this.total=res.total
        })
      },
      //更改时间
      dateChange() {
        this.selectForm.theRepairStartTime = this.selectDate&&this.selectDate[0]||null
        this.selectForm.theRepairEndTime = this.selectDate&&this.selectDate[1]||null
      },
    },
}
</script>

<style>

</style>